<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
<style type="text/css">

/* Pure CSS3 Animated Monster by Taufik Nurrohman
   Visit: http://hompimpaalaihumgambreng.blogspot.com */

body {background:#bbb;text-align:center;}

#outer {
	margin:70px auto;
	width:200px;
	height:500px;
	text-align:center;
	position:relative;
}

.eye {
	overflow:hidden;
	position:relative;
	width:200px;
	height:100px;
	margin:10px 0px;
	background:white;
	background:-webkit-radial-gradient(center, white, #ccc);
	background:-moz-radial-gradient(center, white, #ccc);
	background:-ms-radial-gradient(center, white, #ccc);
	background:-o-radial-gradient(center, white, #ccc);
	background:radial-gradient(center, white, #ccc);
	-webkit-box-shadow:inset 0px -4px 10px rgba(0,0,0,0.4), 0px 1px 7px white, 0px -1px 7px black;
	-moz-box-shadow:inset 0px -4px 10px rgba(0,0,0,0.4), 0px 1px 7px white, 0px -1px 7px black;
	box-shadow:inset 0px -4px 10px rgba(0,0,0,0.4), 0px 1px 7px white, 0px -1px 7px black;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	-webkit-animation:eye 2s infinite alternate;
	-moz-animation:eye 2s infinite alternate;
	-ms-animation:eye 2s infinite alternate;
	-o-animation:eye 2s infinite alternate;
	animation:eye 2s infinite alternate;
}

.eyeball {
	position:relative;
	width:20px;height:100%;
	background:black;
	background:-webkit-radial-gradient(center, circle, #555, #000);
	background:-moz-radial-gradient(center, circle, #555, #000);
	background:-ms-radial-gradient(center, circle, #555, #000);
	background:-o-radial-gradient(center, circle, #555, #000);
	background:radial-gradient(center, circle, #555, #000);
	margin:10px auto;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	-webkit-box-shadow:0px 0px 10px red;
	-moz-box-shadow:0px 0px 10px red;
	box-shadow:0px 0px 10px red;
	-webkit-animation:
	  eye 3s infinite alternate,
	  move 7s infinite alternate,
	  scale 10s  cubic-bezier(1,0,0,1) infinite alternate;
	-moz-animation:
	  eye 3s infinite alternate,
	  move 7s infinite alternate,
	  scale 10s  cubic-bezier(1,0,0,1) infinite alternate;
	-ms-animation:
	  eye 3s infinite alternate,
	  move 7s infinite alternate,
	  scale 10s  cubic-bezier(1,0,0,1) infinite alternate;
	-o-animation:
	  eye 3s infinite alternate,
	  move 7s infinite alternate,
	  scale 10s  cubic-bezier(1,0,0,1) infinite alternate;
	animation:
	  eye 3s infinite alternate,
	  move 7s infinite alternate,
	  scale 10s  cubic-bezier(1,0,0,1) infinite alternate;
}

.eye:after {
	content:"";
	position:absolute;
	top:10px;left:40%;
	background:rgba(255,255,255,0.7);
	width:10px;
	height:20px;
	margin:0px auto 0px;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	-webkit-box-shadow:0px 0px 13px white;
	-moz-box-shadow:0px 0px 13px white;
	box-shadow:0px 0px 13px white;
}

.mouth {
	display:block;
	width:30px;
	height:10px;
	border-top:2px solid black;
	border-radius:100px 100px 0px 0px;
	margin:30px auto;
	-webkit-animation:mouth 7s infinite;
	-moz-animation:mouth 7s infinite;
	-ms-animation:mouth 7s infinite;
	-o-animation:mouth 7s infinite;
	animation:mouth 7s infinite;
}


@-webkit-keyframes eye {
	0%              {top:50px;height:0px;}
	10%, 70%, 100%  {top:0px;height:100px;}
}

@-webkit-keyframes move {
	25%             {left:20px;}
	72%             {margin-top:20px;}
	16%             {margin-top:-20px;}
	50%, 70%        {left:-20px;}
	0%, 80%, 100%   {left:0px;margin-top:0px;}
}

@-webkit-keyframes scale {
	0%, 70%         {-webkit-transform:scale(0.5);-webkit-box-shadow:0px 0px 10px red;}
	100%            {-webkit-transform:scale(1);-webkit-box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}

@-webkit-keyframes mouth {
	0%, 20%, 76%    {border-top:10px solid black;width:20px;}
	10%, 50%, 100%  {border-top:2px solid black;width:30px;}
}


@-moz-keyframes eye {
	0%              {top:50px;height:0px;}
	10%, 70%, 100%  {top:0px;height:100px;}
}

@-moz-keyframes move {
	25%             {left:20px;}
	72%             {margin-top:20px;}
	16%             {margin-top:-20px;}
	50%, 70%        {left:-20px;}
	0%, 80%, 100%   {left:0px;margin-top:0px;}
}

@-moz-keyframes scale {
	0%, 70%         {-moz-transform:scale(0.5);-moz-box-shadow:0px 0px 10px red;}
	100%            {-moz-transform:scale(1);-moz-box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}

@-moz-keyframes mouth {
	0%, 20%, 76%    {border-top:10px solid black;width:20px;}
	10%, 50%, 100%  {border-top:2px solid black;width:30px;}
}


@-ms-keyframes eye {
	0%              {top:50px;height:0px;}
	10%, 70%, 100%  {top:0px;height:100px;}
}

@-ms-keyframes move {
	25%             {left:20px;}
	72%             {margin-top:20px;}
	16%             {margin-top:-20px;}
	50%, 70%        {left:-20px;}
	0%, 80%, 100%   {left:0px;margin-top:0px;}
}

@-ms-keyframes scale {
	0%, 70%         {-ms-transform:scale(0.5);box-shadow:0px 0px 10px red;}
	100%            {-ms-transform:scale(1);box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}

@-ms-keyframes mouth {
	0%, 20%, 76%    {border-top:10px solid black;width:20px;}
	10%, 50%, 100%  {border-top:2px solid black;width:30px;}
}


@-o-keyframes eye {
	0%              {top:50px;height:0px;}
	10%, 70%, 100%  {top:0px;height:100px;}
}

@-o-keyframes move {
	25%             {left:20px;}
	72%             {margin-top:20px;}
	16%             {margin-top:-20px;}
	50%, 70%        {left:-20px;}
	0%, 80%, 100%   {left:0px;margin-top:0px;}
}

@-o-keyframes scale {
	0%, 70%         {-o-transform:scale(0.5);box-shadow:0px 0px 10px red;}
	100%            {-o-transform:scale(1);box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}

@-o-keyframes mouth {
	0%, 20%, 76%    {border-top:10px solid black;width:20px;}
	10%, 50%, 100%  {border-top:2px solid black;width:30px;}
}


@keyframes eye {
	0%              {top:50px;height:0px;}
	10%, 70%, 100%  {top:0px;height:100px;}
}

@keyframes move {
	25%             {left:20px;}
	72%             {margin-top:20px;}
	16%             {margin-top:-20px;}
	50%, 70%        {left:-20px;}
	0%, 80%, 100%   {left:0px;margin-top:0px;}
}

@keyframes scale {
	0%, 70%         {transform:scale(0.5);box-shadow:0px 0px 10px red;}
	100%            {transform:scale(1);box-shadow:0px 0px 30px red, 0px 0px 100px red;}
}

@keyframes mouth {
	0%, 20%, 76%    {border-top:10px solid black;width:20px;}
	10%, 50%, 100%  {border-top:2px solid black;width:30px;}
}

</style>

	</head>
	<body>	

		<div id="outer">
			<div class="eye">
				<div class="eyeball"></div>
			</div>
			<span class="mouth"></span>
		</div>
		<span class="author">Pure CSS3 Little Monster by <a href="http://hompimpaalaihumgambreng.blogspot.com">Taufik Nurrohman</a></span>

	</body>
</html>